<template>
    <div class="chat_header">
        <BaseLayoutHeader>
            <template #onLeft>
                <div class="close">
                    <i class="iconfont icon-a-close" @click="backHandle"></i>
                </div>
            </template>
            <template #onCenter>
                <div class="title">
                    <span>{{ title }}</span>
                </div>
            </template>
            <template #onRight>
                <div class="info">
                    <i class="iconfont icon-a-more"></i>
                </div>
            </template>
        </BaseLayoutHeader>
    </div>
</template>

<script lang="ts" setup>
import BaseLayoutHeader from '@/components/header/BaseLayoutHeader.vue';
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
    title: String,
})

const keyDownHandle = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
        e.preventDefault();
        backHandle();
    }
}
onMounted(() => {
    addEventListener("keydown", keyDownHandle);
})

onUnmounted(() => {
    window.removeEventListener('keydown', keyDownHandle);
});

const backHandle = () => {
    router.back();
}

</script>

<style lang="scss" scoped>
.chat_header {
    padding: 2px;
    background-color: aliceblue;
    padding: 10px;
}

i {
    font-size: 20px;
}

.close {
    display: flex;
    align-items: center;
    padding-left: 5px;
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}

.base_layout_Header {}
</style>
